<!DOCTYPE HTML>
<html>

<head>
      <title>订单列表</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/my-style.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
      <div class="container">
            <div class="detail-page">
                  <div class="detail-page-title">
                        <h4>订单列表</h4>
                  </div>
                  <div class="jx-search-container">
                  <form id="J_Form" class="jx-form form-horizontal jx-form-thin" method="post">
                     <div class="row ">
                        <div class="control-group span7">
                              <label class="control-label">订单编号：</label>
                              <div class="controls">
                                    <input type="text" class=" control-text" id="orderName">
                              </div>
                        </div>
                        <div class="control-group span7">
                              <label class="control-label">商品名称：</label>
                              <div class="controls">
                                    <input type="text" class=" control-text" id="goodsName">
                              </div>
                        </div>
                        <div class="control-group span7">
                              <label class="control-label">收货人姓名：</label>
                              <div class="controls">
                                    <input type="text" class=" control-text" id="receiverName">
                              </div>
                        </div>
                        <div class="control-group span7">
                              <label class="control-label">收货人手机号码：</label>
                              <div class="controls">
                                    <input type="text" class=" control-text" id="receiverPhone">
                              </div>
                        </div>
                        <div class="control-group span11">
                              <label class="control-label">创建时间 ：</label>
                              <div class="controls">
                                    <input class="calendar calendar-time" type="text"  name="startTime" id="startTime"><span> &nbsp;-&nbsp; </span>
                                    <input class="calendar calendar-time" type="text"  name="endTime" id="endTime">
                              </div>
                        </div>
                        <div class="control-group span2 pull-right">
                           <button type="submit" class="jx-btn btn-default">搜索</button>
                        </div>
                     </div>

                  </form>
               </div>
               <div id="tab"></div>
               <div id="panel" class="">
                        <div>
                            <div id="grid"></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
            </div>
      </div>
      </div>
      <!-- 初始隐藏 expressDialog内容 -->
        <div id="express" class="hide">
            <form class="form-horizontal">
                <div id="expressform" class="row">
                        <div id="dialoggrid"></div>
                </div>
                <p>发货地址：上海市 浦东新区 锦绣东路2777弄34号 7楼  AIillian_wang 15921172492</p>
                <div>
                    <span>物流公司：</span>
                     <select id="express" name="express">
                        <option value="0">顺丰</option>
                        <option value="1">圆通</option>
                    </select>
                </div>
                <div style="margin-top:15px;">
                    <span>物流单号：</span>
                    <input type="text" class=" control-text">
                </div>
            </form>
        </div>
      <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/admin.js"></script>

      <script type="text/javascript">
            BUI.use('common/page');
      </script>
      <!-- script start -->
      <script>
            BUI.use(['bui/grid', 'bui/data', 'bui/calendar', 'bui/tab', 'common/search', 'bui/overlay', 'bui/form'], function (Grid, Data, Calendar,
            Tab, Search, Overlay, Form) {
            var Grid = Grid,
                Store = Data.Store,
                columns = [{
                    title: '<span style="display: inline-block;width:270px;text-align:center;">商品</span><span style="display: inline-block;width:150px;text-align:center;">单价</span><span style="display: inline-block;width:100px;text-align:center;">数量</span>',
                    dataIndex: 'a',
                    elCls: 'td-pro', //居中
                    width: 530,
                    renderer: function (value, obj) {
                        return '<div class="td-inner">' +
                        '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '  <div class="pro-info  ml-10">' +
                        '      <p>adidas/阿迪达斯  中性经典鞋   运动生活系列......</p>' +
                        '      <span style="color:#AEAEAE;">规格：7.5（36.5）</span>' +
                        '  </div>' +
                        '  <span style="line-height:60px;width:150px;text-align:center;">248.00</span>'+
                        '  <span style="line-height:60px;width:100px;text-align:center;">1</span>'+
                        '</div>'
                  }
                }, {
                    title: '订单总金额',
                    elCls: 'center',
                    dataIndex: 'b',
                    width: 150
                }, {
                    title: '买家',
                    elCls: 'center',
                    dataIndex: 'c',
                    width: 150,
                    renderer: function (value, obj) {
                        return '<div>' +
                        '  <p >Aillian_wang</p>'+
                        '  <p >15921172492</p>'+
                        '</div>'
                  }
                }, {
                    title: '商户',
                    elCls: 'center',
                    dataIndex: 'd',
                    width: 150
                }, {
                    title: '下单时间',
                    elCls: 'center',
                    dataIndex: 'e',
                    width: 150
                }, {
                    title: '订单状态',
                    elCls: 'center',
                    dataIndex: 'f',
                    width: 150,
                    renderer: function (value, obj) {
                        return '<div>' +
                        '  <p >等待卖家发货</p>'+
                        '  <p style="color:#FF6633;">退款中</p>'+
                        '</div>'
                  }
                }, {
                    title: '操作',
                    dataIndex: 'g',
                    elCls: 'center',
                    width: 200,
                    renderer: function (value, obj) {
                        var sendStr ='<span class="sendBtn">发货</span>';
                        var editStr = Search.createLink({ //链接使用 此方式
                            id: 'edit' + obj.id,
                            title: '订单详情',
                            text: '[ 查看详情 ] ',
                            href: 'templates/order/order-detail.html'
                        });
                        return editStr + sendStr;
                    }
                }],
                data = [{
                    a: '',
                    b: '699（含运费：20）',
                    c: '',
                    d: '激想体育特卖号',
                    e: '2018-04-21 15:30:28',
                    f: '等待买家付款',
                } ];
            var datepicker = new Calendar.DatePicker({
                trigger: '.calendar',
                autoRender: true
            });
            var store = new Store({ //初始化数据
                    data: data,
                    pageSize: 2 // 配置分页数目
                }),
                grid = new Grid.Grid({
                    render: '#grid',
                    elCls: 'small-bui-grid-table',
                    columns: columns,
                    bbar: {
                        // pagingBar:表明包含分页栏
                        pagingBar: true
                    },
                    store: store
                }),
                tab = new Tab.TabPanel({
                    render: '#tab',
                    elCls: 'nav-tabs',
                    panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
                    //                 selectedEvent : 'mouseenter',//默认为click,可以更改事件
                    autoRender: true,
                    children: [{
                        id: '0',
                        title: '全部',
                        value: '2',
                    }, {
                        id: '1',
                        title: '待付款(5)',
                        value: '1',
                    }, {
                        id: '2',
                        title: '待发货(500)',
                        value: '3',
                    }, {
                        id: '3',
                        title: '已发货(100)',
                        value: '3',
                    }, {
                        id: '4',
                        title: '已完成(100)',
                        value: '3',
                    }, {
                        id: '5',
                        title: '交易关闭',
                        value: '3',
                    }]
                });
            var index = 0;
            tab.on('selectedchange', function (ev) {
                var item = ev.item;
            });

            tab.setSelected(tab.getItemAt(0));

            grid.render();
            //发货表格
            var dialogStore = Data.Store,
                dialogcolumns = [{
                    title: '商品',
                    dataIndex: 'a',
                    elCls: 'td-pro', //居中
                        width: 300,
                        renderer: function (value, obj) {
                            return '<div class="td-inner">' +
                            '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                            '  <div class="pro-info  ml-10">' +
                            '      <p>New Balance/NB 247系列 男鞋复古鞋运动休闲鞋MRL247WK[商品交易快照]</p>' +
                            '      <p style="color:#AEAEAE;">商品编号：MRL247WK</p>' +
                            '      <p style="color:#AEAEAE;">规格：8.5</p>' +
                            '  </div>' +
                            '</div>'
                    }
                }, {
                    title: '数量',
                    elCls: 'center',
                    dataIndex: 'b',
                    width: 100
                }, {
                    title: '物流|单号',
                    elCls: 'center',
                    dataIndex: 'c',
                    width: 150,
                    renderer: function (value, obj) {
                        return '<div>' +
                        '  <p>顺丰速递</p>'+
                        '  <p>23583285</p>'+
                        '</div>'
                  }
                }, {
                    title: '状态',
                    elCls: 'center',
                    dataIndex: 'd',
                    width: 100
                }],
                dialogdata = [{
                    a: '',
                    b: '1',
                    c: '',
                    d: '已发货'
                },{
                    a: '',
                    b: '2',
                    c: '',
                    d: '未发货'
                }];

            var dialogstore = new dialogStore({
                    data: dialogdata,
                    autoLoad: true
                }),
                dialoggrid = new Grid.Grid({
                    render: '#dialoggrid',
                    forceFit: true, // 列宽按百分比自适应
                    elCls: 'small-bui-grid-table mb-20',
                    columns: dialogcolumns,
                    plugins: [Grid.Plugins.CheckSelection], //插件
                    store: dialogstore
                });
               dialoggrid.render(); 
            //发货
            var salesLogDialog = new Overlay.Dialog({
                title: '商品发货',
                width: 800,
                // height: 400,
                //配置DOM容器的编号
                contentId: 'express',
                success: function () {
                    //点击成功时候操作

                    //  this.close();
                }
            });
            $('.sendBtn').on('click', function () {
                salesLogDialog.show();
            });
        });
      </script>
      <!-- script end -->

</body>

</html>